<template>
  <div>
    <h2>购物车列表</h2>
    <hr/>
    <ul>
      <li 
        v-for="item,index in shopCarList"
        :key="item.id"
      >
        {{index}}.{{item.id}} {{item.name}}
        ${{item.price}}
        数量{{item.num}}
        <button @click="decreate(item)">-</button>
        <input type="text">
        <button @click="increate(item)">+</button>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapMutations, mapState} from "vuex";
export default {
 computed: {
  ...mapState("shopcar",["shopCarList"]),
 },
 methods: {
  ...mapMutations("shopcar",["decreateCar","increateCar"]),
  ...mapMutations("goods",["increateGoods","decreateGoods"]),
  decreate(item) {
    this.decreateCar({id:item.id,num:1})
    this.increateGoods({id:item.id,num:1})
  },
  increate(item) {
    // 购物车数据增加
    this.increateCar({id:item.id,num:1})
    // 商品数据减少
    this.decreateGoods({id:item.id,num:1})
  }
 }
}
</script>